<template>
    <div class="block">
        <el-timeline>
            <el-timeline-item v-for="(item, idx) in pageResult.list" :key="idx" :timestamp="item.optTime" placement="top">
                {{ item.optDesc }}, <el-link :underline="false" @click="openDialog(item)">详情</el-link>
            </el-timeline-item>
        </el-timeline>

        <el-dialog 
            title="操作详情" 
            :visible.sync="visibleDialog"
            v-if="visibleDialog"
            width="600px"
            :show-close="true"
            @close="closeDialog()"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            append-to-body>
                        
            <el-descriptions direction="vertical" :column="1" border>
                <el-descriptions-item label="操作描述">{{ currentLog.optDesc }}</el-descriptions-item>
                <el-descriptions-item label="操作方法">{{ currentLog.optMethod }}</el-descriptions-item>
                <el-descriptions-item label="请求路径">{{ currentLog.requestUri }}</el-descriptions-item>
                <el-descriptions-item label="请求参数">{{ currentLog.optArgs == null?'-':currentLog.optArgs }}</el-descriptions-item>
                <el-descriptions-item label="操作时间">{{ currentLog.optTime }}</el-descriptions-item>
            </el-descriptions>

        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageResult: { 
                total: 0,
                pageNum: 1,
                pageSize: 10,
                list: []
            },
            visibleDialog: false,
            currentLog: {}
        }
    },
    mounted() {
        this.getSelfList()
    },
    methods: {
        async getSelfList() {
            this.loading = true
            let response = await this.$API.optLog.getSelfList(null)   
            this.pageResult = response.data
            this.loading = false         
        },

        openDialog(log) {
            this.currentLog = log
            this.visibleDialog = true
        },

        closeDialog() {
            this.visibleDialog = false
        }
    }
}
</script>

<style>

</style>